<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{ border: 1px solid;
			width: 1400px;
			height:750px ;
			}
		</style>
	</head>
	<body>
		<canvas id="myCavas" width="1400" height="750"></canvas>
		<script type="text/javascript">
		//定义画布
			var canvas=document.getElementById("myCavas");
			//定义画笔
			var ctx=canvas.getContext("2d");
			//用数组定义小球,五个元素分别代表圆心，圆心，半径，x方向的加速度，y方向的加速度
			var arcArr=[
//			[20,100,20,5,0,"red"],
//			[10,100,20,10,0,"pink"],
//			[30,100,20,10,5,"green"]
			];
			// 最外面的定时器，让小球源源不断进来
			setInterval(function(){
				for(var i=0;i<30;i++){
					var vx=parseInt(Math.random()*5)+1;
				
				if(Math.random()>0.5){
					vx=-vx;
				}
					
				var vy=(Math.random()*15)+15;
				var r=parseInt(Math.random()*256);
				var g=parseInt(Math.random()*256);
				var b=parseInt(Math.random()*256);
				//改变小球不同的颜色
				arcArr.push([700,700,6,vx,-vy,"rgb("+r+","+g+","+b+")"]);
				}
			},1000);
			//里面的定时器
			setInterval(function(){
				ctx.fillStyle="rgba(0,0,0,0.3)";
				ctx.fillRect(0,0,1400,750);
				//for循环
				for(var i=0;i<arcArr.length;i++){
				ctx.beginPath();
				
//				var arcX=arcArr[0][0];
//				var arcY=arcArr[0][1];
//				var arcR=arcArr[0][2];
//				var arc_vx=arcArr[0][3];
//				var arc_vy=arcArr[0][4];
                 ctx.beginPath();
                ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
                ctx.fillStyle=arcArr[i][5];
                ctx.fill();
                
                arcArr[i][0]=arcArr[i][0]+arcArr[i][3];
                arcArr[i][1]=arcArr[i][1]+arcArr[i][4];
                //让小球每次出来半径都减少
                arcArr[i][2]=arcArr[i][2]-Math.random()*0.06;
                arcArr[i][4]=arcArr[i][4]+0.5;
                //判断小球出去的for循环
                if(arcArr[i][2]<Math.random()*2){
                	arcArr.splice(i,1);
                }
         
//		

//             ctx.arc(arcX,arcY,arcR,0,2*Math.PI);
//				ctx.fill();
//				arcX=arcX+arc_vx;
//				arcY=arcY+arc_vy;
//				arc_vy=arc_vy+0.5;
//             if(arcArr[i][1]>750-arcArr[i][2]){
//             	 arcArr[i][4]=- arcArr[i][4];
//             	  arcArr[i][4]= arcArr[i][4]*0.8;
//             	  arcArr[i][1]=750-arcArr[i][2];
//             	   }
               //出去不反弹
//             	  if( arcArr[i][0]>1400-arcArr[i][2]){
//             	  	arcArr[i][3]=-arcArr[i][3];
//             	  	arcArr[i][0]=1400-arcArr[i][2];
//             	  }
//             	  if(arcArr[i][0]<arcArr[i][2]){
//             	  	arcArr[i][3]=-arcArr[i][3];
//             	  	arcArr[i][0]=arcArr[i][2];
//             	  }
               	  	
              }
			},16);
		</script>
	</body>
</html>
